<!-- 补货规则设置 -->
<template>
    <div class="page-box">
        <div class="page-title">
            {{ '补货规则配置' }}
        </div>

        <div class="rules-content">
            <div class="rules-form">
                <el-form :model="formData" label-width="180px" class="rules-form-container">
                    <el-form-item label="日均用量计算周期:" class="form-item">
                        <el-input 
                            v-model="formData.dailyUsagePeriod" 
                            placeholder="请输入日均用量计算周期"
                            style="width: 300px;"
                            suffix-icon="el-icon-edit"
                        />
                    </el-form-item>

                    <el-form-item label="最大库存周转天数:" class="form-item">
                        <el-input 
                            v-model="formData.maxInventoryDays" 
                            placeholder="请输入最大库存周转天数"
                            style="width: 300px;"
                            suffix-icon="el-icon-edit"
                        />
                    </el-form-item>

                    <el-form-item label="安全库存天数:" class="form-item">
                        <el-input 
                            v-model="formData.safetyStockDays" 
                            placeholder="请输入安全库存天数"
                            style="width: 300px;"
                            suffix-icon="el-icon-edit"
                        />
                    </el-form-item>

                    <el-form-item class="form-actions">
                        <el-button type="primary" @click="handleSave" :loading="saveLoading">
                            保存设置
                        </el-button>
                        <el-button @click="handleReset">
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '@/api';

// 表单数据
const formData = ref({
    dailyUsagePeriod: '0',      // 日均用量计算周期
    maxInventoryDays: '0',       // 最大库存周转天数
    safetyStockDays: '0'         // 安全库存天数
});

// 保存状态
const saveLoading = ref(false);

// 获取补货规则配置
const getRulesConfig = async () => {
    try {
        const res = await api.publicFun.getReplenishmentRules();
        console.log('获取补货规则配置响应:', res);
        
        if (res.code === 200 ) {
            // 从数组中提取每一项的value值进行回显
            const configData = res.data;
            
            // 根据key匹配对应的配置项
            configData.forEach(item => {
                if (item.key === 'daily_usage_calculation_cycle') {
                    formData.value.dailyUsagePeriod = item.value ;
                } else if (item.key === 'max_stock_turnover_days') {
                    formData.value.maxInventoryDays = item.value ;
                } else if (item.key === 'safety_stock_days') {
                    formData.value.safetyStockDays = item.value ;
                }
            });
            
            console.log('回显后的表单数据:', formData.value);
        } else {
            console.log('使用默认配置值');
        }
    } catch (error) {
        console.error('获取补货规则配置失败:', error);
        ElMessage.error('获取配置失败，使用默认值');
    }
};

// 保存设置
const handleSave = async () => {
    // 验证数据
    if (!formData.value.dailyUsagePeriod || !formData.value.maxInventoryDays || !formData.value.safetyStockDays) {
        ElMessage.warning('请填写完整的配置信息');
        return;
    }

    // 验证是否为正整数
    const dailyUsage = parseInt(formData.value.dailyUsagePeriod);
    const maxInventory = parseInt(formData.value.maxInventoryDays);
    const safetyStock = parseInt(formData.value.safetyStockDays);

    if (isNaN(dailyUsage) || dailyUsage <= 0) {
        ElMessage.warning('日均用量计算周期必须为正整数');
        return;
    }
    if (isNaN(maxInventory) || maxInventory <= 0) {
        ElMessage.warning('最大库存周转天数必须为正整数');
        return;
    }
    if (isNaN(safetyStock) || safetyStock <= 0) {
        ElMessage.warning('安全库存天数必须为正整数');
        return;
    }

    // 添加确认提示
    try {
        await ElMessageBox.confirm(
            '确定要保存当前的补货规则配置吗？保存后将立即生效。',
            '确认保存',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
    } catch {
        // 用户取消保存
        return;
    }

    saveLoading.value = true;
    try {
        const res = await api.ReplenishmentRules.setReplenishmentRules({
            daily_usage_calculation_cycle: formData.value.dailyUsagePeriod,
            max_stock_turnover_days: formData.value.maxInventoryDays,
            safety_stock_days: formData.value.safetyStockDays
        });
        
        console.log('保存补货规则配置响应:', res);
        
        if (res.code === 200) {
            ElMessage.success('补货规则配置保存成功');
        } else {
            ElMessage.error(res.message || '保存失败');
        }
    } catch (error) {
        console.error('保存补货规则配置失败:', error);
        ElMessage.error('保存失败，请重试');
    } finally {
        saveLoading.value = false;
    }
};

// 重置表单
const handleReset = () => {
    formData.value = {
        dailyUsagePeriod: '0',
        maxInventoryDays: '0',
        safetyStockDays: '0'
    };
    ElMessage.info('已重置为默认值');
};

// 页面初始化
onMounted(() => {
    getRulesConfig();
});
</script>

<style lang="scss" scoped>
.page-box {
    padding: 20px;
    background-color: #fff;
    min-height: calc(100vh - 40px);
}

.page-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e7ed;
}

.rules-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 0;
}

.rules-form-container {
    background-color: #fafafa;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #e4e7ed;
}

.form-item {
    margin-bottom: 30px;
    
    :deep(.el-form-item__label) {
        font-weight: 500;
        color: #606266;
        line-height: 40px;
    }
    
    :deep(.el-input__wrapper) {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        transition: border-color 0.2s;
        
        &:hover {
            border-color: #c0c4cc;
        }
        
        &.is-focus {
            border-color: #409eff;
        }
    }
    
    :deep(.el-input__inner) {
        font-size: 14px;
        padding: 0 15px;
        height: 38px;
        line-height: 38px;
    }
}

.form-actions {
    margin-top: 40px;
    text-align: center;
    
    .el-button {
        min-width: 100px;
        height: 40px;
        font-size: 14px;
        
        &.el-button--primary {
            background-color: #409eff;
            border-color: #409eff;
            
            &:hover {
                background-color: #66b1ff;
                border-color: #66b1ff;
            }
        }
        
        & + .el-button {
            margin-left: 20px;
        }
    }
}

// 响应式设计
@media (max-width: 768px) {
    .rules-content {
        padding: 20px 0;
    }
    
    .rules-form-container {
        padding: 20px;
        margin: 0 10px;
    }
    
    .form-item {
        :deep(.el-form-item__label) {
            line-height: 1.5;
            margin-bottom: 8px;
        }
        
        :deep(.el-input) {
            width: 100% !important;
        }
    }
    
    .form-actions {
        .el-button {
            width: 100%;
            margin: 0 0 10px 0 !important;
        }
    }
}
</style>
 